<template>
  <el-dialog title="请选择部门或者人员" :visible.sync="isPerson" width='700px' center append-to-body>
    <div class="uni-flex ">
      <div class="uni-flex-item px10">
        <div class="f16">选择</div>
        <div class="dbox p10 mt10">
          <div v-if="person || role">
            <el-input placeholder="搜索" clearable prefix-icon="el-icon-search" v-model="keyword" @input="getStaffLists(keyword)">
            </el-input>
          </div>
          <el-radio-group class="pt5 pertype" v-model="personType" v-if='(person || department) && role  ' @change='handlePersonType'>
            <el-radio-button class="wp100 uni-flex-item" label="1"> <span>组织架构</span> </el-radio-button>
            <el-radio-button class=" wp100 uni-flex-item" label="2"> <span>岗位列表</span> </el-radio-button>

          </el-radio-group>
          <div v-if='personType== 1 && (person || department )'>
            <div class="menudept">
              <span v-for="(item,index) in breadList" :key="index">
                <span v-if='index==0' @click.prevent="getDeptStaffLists(item)" class="cursor cblue">{{item.name.length > 4 ? item.name.substr(0,4)+'...' : item.name }}</span>
                <span v-if='index>0 && index < (breadList.length-1)' @click.prevent="getDeptStaffLists(item)" class="cursor cblue"> > {{item.name.length > 4 ? item.name.substr(0,4)+'...' : item.name }}</span>
                <span v-if='index == (breadList.length-1) && index > 0'> > {{item.name.length > 5 ? item.name.substr(0,4)+'...' : item.name }}</span>
              </span>
            </div>
            <div class="boxscroll">
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              <div v-if='!department && person'>
                <div class="relative" v-for="item in options.deptList" :label="item.id" :key="item.id">
                  <i class="el-icon-folder-opened pr5 pb10"></i>{{item.name}}
                  <i class="el-icon-menu px10 menuDep cblue cursor" @click.prevent="getDeptStaffLists(item)">下级</i>
                </div>
              </div>
              <el-checkbox-group v-if='department' v-model="deptCheckIds" @change="handleCheckedListChange">
                <el-checkbox v-for="item in options.deptList" :label="item.id" @change="handlechangeItem(item,1)" :key="item.id">
                  <i class="el-icon-folder-opened pr5"></i>{{item.name}}
                  <i class="el-icon-menu px10 menuDep cblue cursor" @click.prevent="getDeptStaffLists(item)">下级</i>
                </el-checkbox>
              </el-checkbox-group>
              <el-checkbox-group v-if='person' v-model="personCheckIds" @change="handleCheckedListChange">
                <el-checkbox @change="handlechangeItem(item,2)" v-for="item in options.staffList" :label="item.id" :key="item.id"><i class="el-icon-user-solid pr5"></i>{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div v-if='role' class="boxscroll2 pt10">
            <el-checkbox-group v-if=' role && !(personType == 1 && (department || person) ) ' v-model="characterCheckIds">
              <el-checkbox @change="handlechangeItem(item,3)" v-for="item in options.characterList" :label="item.id" :key="item.id"><i class="el-icon-s-check pr5"></i>{{item.name}}</el-checkbox>
            </el-checkbox-group>
            <!-- <el-empty v-if="options.characterList.length<1" description="数据为空"></el-empty> -->
          </div>

        </div>
      </div>
      <div class="uni-flex-item px10">
        <div class="f16">已选</div>
        <div class="dbox p10 mt10">
          <div class="boxscroll3">
            <div class="selected " v-for="item in deptCheckList" :key="item.id">
              <i v-if="item.type==1" class="el-icon-folder-opened pr5"></i>
              <span>{{item.name}}</span>
              <i class="el-icon-close flexright" @click="removeItem(item,1)"></i>
            </div>
            <div class="selected " v-for="item in personCheckList" :key="item.id">
              <i v-if="item.type==2" class="el-icon-user-solid pr5"></i>
              <span>{{item.name}}</span>
              <i class="el-icon-close flexright" @click="removeItem(item,2)"></i>
            </div>
            <div class="selected " v-for="item in characterCheckList" :key="item.id">
              <i class="el-icon-s-check pr5"></i>
              <span>{{item.name}}</span>
              <i v-if="item.type==3" class="el-icon-close flexright" @click="removeItem(item,3)"></i>
            </div>
            <el-empty v-if="deptCheckList.length<1 && personCheckList.length<1  && characterCheckList.length<1" description="已选为空"></el-empty>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="isPerson = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  getDeptStaffList, //部门
  getStaffQuery, //人员
  getRoleList, //角色
  getPostList, //岗位
} from "@/components/api/index.js";
export default {
  name: "mgPersondialog",
  components: {},
  props: {
    checkList: Array,
    role: {
      type: Boolean,
      default: false,
    }, //
    department: {
      type: Boolean,
      default: false,
    }, //
    person: {
      type: Boolean,
      default: false,
    }, //
  },
  data() {
    return {
      personType: 1, //1：部门和人员，2：岗位
      checked: false,
      isPerson: true, //是否显示部门人员列表窗口
      deptStaffList: {}, //部门和人员列表
      keyword: "", //搜索关键字
      checkAll: false, //是否全选
      isIndeterminate: true, //表示 checkbox 的不确定状态，用于实现全选的效果
      deptCheckIds: [], //选择的数据 部门
      personCheckIds: [], //选择的数据 人员
      characterCheckIds: [], //选择的数据 岗位
      deptCheckList: [], //选择的数据 部门
      personCheckList: [], //选择的数据 人员
      characterCheckList: [], //选择的数据 岗位
      // pair: [["nameProp", "label"]], // 双数据数组格式定义
      options: {
        deptList: [],
        staffList: [],
        characterList: [],
      }, //转化后的部门和人员列表
      //面包屑
      breadList: [
        {
          name: "通讯录",
          id: 0,
        },
      ],
    };
  },
  watch: {
    isPerson() {
      if (!this.isPerson) {
        this.handleClose();
      }
    },
  },
  computed: {},
  //生命周期，创建完成（可以访问当前this实例）
  created() {
    // console.log(this.checkList, "this.checkList");
    if (this.checkList && this.checkList.length > 0) {
      this.checkList.forEach((item) => {
        if (item.type == 1) {
          this.deptCheckList.push(item);
          this.deptCheckIds.push(item.id);
        }
        if (item.type == 2) {
          this.personCheckList.push(item);
          this.personCheckIds.push(item.id);
        }
        if (item.type == 3) {
          this.characterCheckList.push(item);
          this.characterCheckIds.push(item.id);
        }
      });
    }
    if (!this.role && !this.department && !this.person) {
      this.department = true;
      this.person = true;
    }
    this.getDeptStaffLists();
    this.getRolesLists();
  },
  //生命周期，挂载完成（可以访问dom元素）
  mounted() {},
  //方法集合
  methods: {
    //提交数据
    onSubmit() {
      this.value = [
        ...this.deptCheckList,
        ...this.personCheckList,
        ...this.characterCheckList,
      ];
      this.isPerson = false;
    },
    handleClose() {
      this.$emit("on-submit", this.value);
    },
    //获取岗位列表
    getRolesLists() {
      let tenantId = "";
      if (this.$store && this.$store.getters.useTenant) {
        tenantId = this.$store.getters.useTenant;
      } else {
        tenantId = "1";
      }
      getPostList({
        tenantId: tenantId,
        keyWord: this.keyword,
      }).then((res) => {
        res.data.forEach((item) => {
          this.options.characterList.push({
            name: item.name,
            type: 3,
            id: item.id,
          });
        });
      });
    },
    //tab切换
    handlePersonType() {
      if (this.keyword) {
        this.keyword = "";
        this.getDeptStaffLists();
        this.getRolesLists();
      }
    },
    //获取部门和人员列表
    getDeptStaffLists(item) {
      this.options.deptList = [];
      this.options.staffList = [];
      this.checkAll = false;
      this.isIndeterminate = false;
      if (item) {
        if (item.id == 0) {
          this.breadList = [
            {
              name: "通讯录",
              id: 0,
            },
          ];
        } else {
          let indexTemp = this.breadList.findIndex((element) => {
            return element.id == item.id && element.name == item.name;
          });
          if (indexTemp == -1) {
            this.breadList.push({
              name: item.name,
              id: item.id,
            });
          }
        }
      }

      let tenantId = "";
      if (this.$store && this.$store.getters.useTenant) {
        tenantId = this.$store.getters.useTenant;
      } else {
        tenantId = "1";
      }
      getDeptStaffList({
        tenantId: tenantId,
        parentId: item ? item.id : "" || 0,
      }).then((res) => {
        this.deptStaffList = res.data;
        this.deptStaffList.deptList.forEach((item) => {
          this.options.deptList.push({
            name: item.name,
            type: 1,
            id: item.id,
          });
        });
        this.deptStaffList.staffList.forEach((item) => {
          this.options.staffList.push({
            name: item.userName,
            type: 2,
            id: item.userId,
            ouid: item.ouid,
          });
        });
        this.handleCheckedListChange();
      });
    },
    //获取人员列表
    getStaffLists(key) {
      if (key === "") {
        this.getDeptStaffLists();
        this.getRolesLists();
        return;
      }
      this.options.deptList = [];
      this.options.staffList = [];
      this.options.characterList = [];
      let tenantId = "";
      if (this.$store && this.$store.getters.useTenant) {
        tenantId = this.$store.getters.useTenant;
      } else {
        tenantId = "1";
      }
      //岗位
      if (this.personType == 2) {
        getPostList({
          tenantId: tenantId,
          keyWord: key,
        }).then((res) => {
          res.data.forEach((item) => {
            this.options.characterList.push({
              name: item.name,
              type: 3,
              id: item.id,
            });
          });
        });
      }
      //人员
      if (this.personType == 1) {
        getStaffQuery({
          tenantId: tenantId,
          name: key,
        }).then((res) => {
          res.data.forEach((item) => {
            this.options.staffList.push({
              name: item.userName,
              type: 2,
              id: item.userId,
              ouid: item.ouid,
            });
          });
        });
      }
    },
    //删除已选
    removeItem(data, type) {
      if (type == 1) {
        let indexIds = this.deptCheckIds.findIndex((item) => item == data.id);
        let indexList = this.deptCheckList.findIndex(
          (item) => item.id == data.id
        );
        if (indexIds > -1) {
          this.deptCheckIds.splice(indexIds, 1);
        }
        if (indexList > -1) {
          this.deptCheckList.splice(indexList, 1);
        }
      }
      if (type == 2) {
        let indexIds = this.personCheckIds.findIndex((item) => item == data.id);
        let indexList = this.personCheckList.findIndex(
          (item) => item.id == data.id
        );
        if (indexIds > -1) {
          this.personCheckIds.splice(indexIds, 1);
        }
        if (indexList > -1) {
          this.personCheckList.splice(indexList, 1);
        }
      }
      if (type == 3) {
        let indexIds = this.characterCheckIds.findIndex(
          (item) => item == data.id
        );
        let indexList = this.characterCheckList.findIndex(
          (item) => item.id == data.id
        );
        if (indexIds > -1) {
          this.characterCheckIds.splice(indexIds, 1);
        }
        if (indexList > -1) {
          this.characterCheckList.splice(indexList, 1);
        }
      }
      this.handleCheckedListChange();
    },

    //全选
    handleCheckAllChange(val) {
      if (val) {
        //全选
        if (this.department) {
          this.options.deptList.forEach((data) => {
            let indexIds = this.deptCheckIds.findIndex(
              (item) => item == data.id
            );
            let indexList = this.deptCheckList.findIndex(
              (item) => item.id == data.id
            );
            if (indexIds == -1) {
              this.deptCheckIds.push(data.id);
            }
            if (indexList == -1) {
              this.deptCheckList.push(data);
            }
          });
        }
        if (this.person) {
          this.options.staffList.forEach((data) => {
            let indexIds = this.personCheckIds.findIndex(
              (item) => item == data.id
            );
            let indexList = this.personCheckList.findIndex(
              (item) => item.id == data.id
            );
            if (indexIds == -1) {
              this.personCheckIds.push(data.id);
            }
            if (indexList == -1) {
              this.personCheckList.push(data);
            }
          });
        }
      } else {
        //去消全选
        if (this.department) {
          this.options.deptList.forEach((data) => {
            let indexIds = this.deptCheckIds.findIndex(
              (item) => item == data.id
            );
            let indexList = this.deptCheckList.findIndex(
              (item) => item.id == data.id
            );
            if (indexIds > -1) {
              this.deptCheckIds.splice(indexIds, 1);
            }
            if (indexList > -1) {
              this.deptCheckList.splice(indexList, 1);
            }
          });
        }
        if (this.person) {
          this.options.staffList.forEach((data) => {
            let indexIds = this.personCheckIds.findIndex(
              (item) => item == data.id
            );
            let indexList = this.personCheckList.findIndex(
              (item) => item.id == data.id
            );
            if (indexIds > -1) {
              this.personCheckIds.splice(indexIds, 1);
            }
            if (indexList > -1) {
              this.personCheckList.splice(indexList, 1);
            }
          });
        }
      }
      this.isIndeterminate = false;
    },
    //是否全选
    handleCheckedListChange() {
      this.checkAll = true;
      this.isIndeterminate = false;
      let i = 0;
      let j = 0;
      this.options.deptList.forEach((item) => {
        let indexTemp = this.deptCheckIds.findIndex(
          (item2) => item2 == item.id
        );
        if (indexTemp > -1) {
          i = i + 1;
          this.isIndeterminate = true;
        } else {
          this.checkAll = false;
        }
      });
      this.options.staffList.forEach((item) => {
        let indexTemp = this.personCheckIds.findIndex(
          (item2) => item2 == item.id
        );
        if (indexTemp > -1) {
          j = j + 1;
          this.isIndeterminate = true;
        } else {
          this.checkAll = false;
        }
      });
      if (
        this.options.deptList.length == i &&
        this.options.staffList.length == j
      ) {
        this.isIndeterminate = false;
        this.checkAll = true;
      }
    },
    //数据补充
    changeDate(ids, arrDate) {
      let idsData = [];
      ids.forEach((item) => {
        arrDate.forEach((item2) => {
          if (item.id == item2.id) {
            idsData.push(item2);
          }
        });
      });
      return idsData;
    },
    //修改数据
    handlechangeItem(item, type) {
      console.log(item, type, "itemitemitem");
      let hasId = true;
      if (type == 1) {
        this.deptCheckList.forEach((item2, index) => {
          if (item.id == item2.id) {
            this.deptCheckList.splice(index, 1);
            hasId = false;
          }
        });
        if (hasId) {
          this.deptCheckList.push(item);
        }
      }
      if (type == 2) {
        this.personCheckList.forEach((item2, index) => {
          if (item.id == item2.id) {
            this.personCheckList.splice(index, 1);
            hasId = false;
          }
        });
        if (hasId) {
          this.personCheckList.push(item);
        }
      }
      if (type == 3) {
        this.characterCheckList.forEach((item2, index) => {
          if (item.id == item2.id) {
            this.characterCheckList.splice(index, 1);
            hasId = false;
          }
        });
        if (hasId) {
          this.characterCheckList.push(item);
        }
      }
      this.handleCheckedListChange();
    },
  },
};
import "../../../static/base.less";
</script>
<style scoped lang='less'>
.dbox {
  border: 1px solid #dedede;
  border-radius: 4px;
  background: #f4f6f8;
  height: 350px;
  .menudept {
    line-height: 26px;
  }
  .boxscroll {
    overflow-y: auto;
    max-height: 220px;
  }
  .boxscroll2 {
    overflow-y: auto;
    max-height: 250px;
  }
  .boxscroll3 {
    overflow-y: auto;
    max-height: 330px;
    min-height: 300px;
  }
  .selected {
    line-height: 30px;
    padding-left: 10px;
    cursor: pointer;
    position: relative;
    .flexright {
      position: absolute;
      right: 0;
      top: 8px;
      padding: 0 10px;
    }
  }
  .selected:hover {
    background: #ddd;
  }
  .menuDep {
    position: absolute;
    right: 0;
    top: 3px;
  }
  .el-checkbox {
    display: block;
    margin-left: 0;
    margin-right: 0;
    height: 28px;
  }
  .delbut {
    padding: 5px;
  }
  .el-empty {
    padding: 0;
  }
  .pertype {
    display: flex;
  }
  .pertype /deep/ .el-radio-button__inner {
    width: 100%;
  }
}
</style>